<template>
  <div class="app-container">
    <!-- 工具栏 start-->
    <div class="nav-tool">
      <div class="nt-main"></div>
      <div class="nt-aside">
        <el-button
          size="small"
          class="btnRouter"
          type="primary"
          @click="handleAction(null, 'new')"
        >创建根目录</el-button>
      </div>
    </div>
    <!-- 工具栏 end-->

    <div class="page-content">
      <el-table
        :data="lists"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :indent="20"
        :tree-props="{ children: 'child' }"
      >
        <el-table-column prop="title" label="菜单名称"  align="left"></el-table-column>
        <el-table-column label="标识" >
          <template slot-scope="scope">
            <div v-for="item in scope.row.identification_list"  :key="item">{{ item }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="web_path" label="前端路由" ></el-table-column>
        <el-table-column label="类型"  align="center">
          <template slot-scope="scope">
            <span
              v-for="item in dict_list.type_list"
              v-if="item.value == scope.row.type"
            >{{ item.label }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center"></el-table-column>
        <el-table-column label="操作" width="230" align="center">
          <template slot-scope="scope">
            <el-button
              v-auth="'/admin/auth/menu/action'"
              type="text"
              size="mini"
              @click="handleAction(scope.row, 'add')"
            >添加</el-button>
            <el-button
              v-auth="'/admin/auth/menu/action'"
              type="text"
              size="mini"
              @click="handleAction(scope.row, 'edit')"
            >编辑</el-button>
            <el-button
              v-auth="'/admin/auth/menu/delete'"
              type="text"
              size="mini"
              @click="handleDel(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--新建/编辑 弹框-->
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      :before-close="modalClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <div v-loading="loading">
        <el-form :model="actionForm" ref="actionForm" label-width="150px" size="small">
          <el-form-item label="菜单名称：" prop="title" :rules="$rule.required">
            <el-input v-model.trim="actionForm.title"></el-input>
          </el-form-item>

          <el-form-item label="标识：" prop="identification" :rules="$rule.required">
            <el-input type="textarea" v-model.trim="actionForm.identification"></el-input>
            <div>以view_开始的页面，则只作用于前端展示，info以及dict接口默认继承index权限</div>
            <div>允许通过,隔开多个路由</div>
          </el-form-item>

          <el-form-item label="序号：" prop="sort" :rules="$rule.required">
            <el-input-number v-model="actionForm.sort" :min="0"></el-input-number>
          </el-form-item>

          <el-form-item label="是否显示：" prop="state" :rules="$rule.required">
            <el-radio v-model="actionForm.state" :label="1">是</el-radio>
            <el-radio v-model="actionForm.state" :label="0">否</el-radio>
          </el-form-item>

          <el-form-item prop="type" label="类型：" :rules="$rule.required" align="left">
            <template v-for="(item, index) in dict_list.type_list">
              <el-radio v-model="actionForm.type" :label="item.value">{{ item.label }}</el-radio>
            </template>
          </el-form-item>

          <el-form-item prop="menu_type" label="菜单类型：" :rules="$rule.required" align="left">
            <template v-for="(item, index) in dict_list.menu_type_list">
              <el-radio v-model="actionForm.menu_type" :label="item.value">{{ item.label }}</el-radio>
            </template>
            <div>设置为外部则角色权限分配无法选择</div>
          </el-form-item>

          <el-form-item label="前端路由：" prop="web_path" :rules="actionForm.type == 1 ? $rule.required :''">
            <el-input v-model.trim="actionForm.web_path"></el-input>
          </el-form-item>

          <el-form-item label="图标：" prop="icon">
            <el-input v-model.trim="actionForm.icon"></el-input>
          </el-form-item>
        </el-form>
        <div class="tool2">
          <el-button @click="handleSubmit" type="primary" size="medium">确定</el-button>
          <el-button @click="modalClose" size="medium">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lists: [],
      loading: true,

      st: 0,
      dialogVisible: false,
      dialogTitle: '',

      actionForm: {
        id: '', // ID值【更新时必填】
        pid: '',
        title: '', //String	生产商全称
        identification: '',
        sort: '', // 排序
        type: '',
        state: '',
        web_path: '',
        icon: '',
        menu_type: '',
      },

      searchParams: {},

      dict_list: {
        type_list: [],
        menu_type_list: [],
      },
    }
  },
  created() {
    this.handleInit()
  },

  mounted() {},

  methods: {
    reseting(o = {}) {
      o = { lists: [], ...o }
      this.$util.setAttr(this, o)
    },

    //列表
    async handleRequest() {
      let that = this
      try {
        that.loading = true
        let { result } = await that.$.authority.authMenuIndex(that.searchParams)
        that.lists = result

        that.loading = false
      } catch (e) {
        that.loading = false
      }
    },

    //初始化
    async handleInit() {
      const that = this

      const { result } = await that.$.authority.authMenuDict()
      that.dict_list = result

      await this.handleRequest()
    },

    // 新建，编辑标签
    handleAction(row = null, type) {
      if (type === 'new') {
        this.dialogTitle = '创建根目录'

        this.actionForm.id = ''
        this.actionForm.pid = 0
        this.actionForm.title = ''
        this.actionForm.identification = ''
        this.actionForm.sort = 0
        this.actionForm.type = 1
        this.actionForm.state = 1
        this.actionForm.web_path = ''
        this.actionForm.icon = ''
        this.actionForm.menu_type = 1
      } else if (type === 'add') {
        this.dialogTitle = '添加菜单'

        this.actionForm.id = ''
        this.actionForm.pid = row.id
        this.actionForm.title = ''
        this.actionForm.identification = ''
        this.actionForm.sort = 0
        this.actionForm.type = 1
        this.actionForm.state = 1
        this.actionForm.web_path = ''
        this.actionForm.icon = ''
        this.actionForm.menu_type = 1
      } else {
        this.dialogTitle = '编辑菜单'

        this.actionForm.id = row.id
        this.actionForm.pid = row.pid
        this.actionForm.title = row.title
        this.actionForm.identification = row.identification
        this.actionForm.sort = row.sort
        this.actionForm.type = row.type
        this.actionForm.state = row.state
        this.actionForm.web_path = row.web_path
        this.actionForm.icon = row.icon
        this.actionForm.menu_type = row.menu_type
      }

      this.dialogVisible = true
    },

    // 关闭对话框
    modalClose() {
      this.dialogVisible = false
    },

    //保存
    handleSubmit() {
      let that = this
      that.$refs.actionForm.validate(async (v) => {
        if (!v) {
          return false
        }
        try {
          that.dialogloading = true
          let { result } = await that.$.authority.authMenuAction(
            that.actionForm
          )
          that.dialogloading = false
          that.dialogVisible = false
          that.$message({ type: 'success', message: '保存成功' })
          that.handleRequest()
        } catch (e) {
          that.dialogloading = false
        }
      })
    },

    // 删除
    async handleDel(e) {
      let that = this
      let ask = await that.$util.confirm({ that, content: `确定删除?` })
      if (ask) {
        let { result } = await that.$.authority.authMenuDelete({
          selected: e.id,
        })
        that.$message({ type: 'success', message: '删除成功' })
        that.handleRequest()
      }
    },
  },
}
</script>

<style></style>
